import React from 'react';
import ReactDOM from 'react-dom';
import ModifyPasswordStyle from './ModifyPassword.less';


export default class ModifyPassword extends React.Component {
  static propTypes = {
    name: React.PropTypes.string,
    securityCodeUrl: React.PropTypes.string,
    onSubmit: React.PropTypes.func,
    userName: React.PropTypes.string,
  };
 
  state = {
  	oldPassword:'',
  	newPassword:'',
  	confirmPassword:'',
    securityCode:'',
    //提示消息
  	message:'',
    //提示消息展示位置，0为不展示，状态码由0，1，2，3四位
    messagePosition:0,
  };

  constructor(props) {
    super(props);
  };

  /**
   * 保存输入框值到state
   * @param  {[type]} event [事件对象]
   * @param  {string} key   [当前输入框键值]
   * @return {[type]}       [description]
   */
  handleInput = (event, key) => {
    let value = event.target.value;
    this.setState({
      [key]: value
    });
  };
  /**
   * 点击切换验证码
   * @return {[type]} [description]
   */
  haneleReloadSecurityCode = () => {
    let img = ReactDOM.findDOMNode(this.refs.securityCode);
    img.src = img.src;
  };
  /**
   * 提交按钮
   * @return {[type]} [description]
   */
  handleSubmit = () => {
    let { oldPassword, newPassword, securityCode, disabled, confirmPassword } = this.state;
    let { onSubmit, message } = this.props;
    //判断密码是否合法
    let re = /^[a-zA-Z0-9]{6,20}$/;
    if (!re.test(newPassword)){
        this.setState({
          message:'输入新密码不合法',
          messagePosition:2
        });
        return
      };

    //检测新旧密码是否一致
    if (confirmPassword != newPassword) {
      this.setState({
          message:'新密码与确认新密码不一致',
          messagePosition:3
        });
        return
      };

    onSubmit&&onSubmit({oldPassword,newPassword,securityCode})

  };
  /**
   * 收到服务器消息时展示消息
   * @param  {[type]} nextProps [新状态]
   * @return {[type]}           [description]
   */
  componentWillReceiveProps(nextProps){
    let { message, actionState, onBack } =nextProps;
    this.setState({
          message,
          messagePosition:1
        });
    if ( actionState == 1) {
       onBack && onBack()
    };
  };

  render() {
    let { securityCode, message, messagePosition } = this.state;
    let { securityCodeUrl, actionState } = this.props;
    return (
    	<div className={ModifyPasswordStyle.modifyPassword}>  
      <div>
        <p>{messagePosition==1 && message && <b>{message}</b>}</p>
        <div className='submitPage'>
            <b>原密码：</b>
            <input type="password" onInput={(e)=>{this.handleInput(e, 'oldPassword')}} />
            <span>请输入原密码</span>
          </div>
          <p>{messagePosition==2 && message && <b>{message}</b>}</p>
          <div>
            <b>新密码：</b>
            <input type="password"  onInput={(e)=>{this.handleInput(e, 'newPassword')}} />
            <span>请至少输入6位密码(由字母、数字组成）</span>
          </div>
          <p>{messagePosition==3 && message && <b>{message}</b>}</p>
          <div>
            <b>确认新密码：</b>
            <input type="password"  onInput={(e)=>{this.handleInput(e, 'confirmPassword')}} />
            <span>请再次输入新密码</span>
          </div>
          <p></p>
          <div className={ModifyPasswordStyle.code_content}>
              <b>输入验证码：</b>
              <div className={ModifyPasswordStyle.code}><span className={ModifyPasswordStyle.code_icon}></span>
                <input  onInput={(e)=>{this.handleInput(e, 'securityCode')}}  value={securityCode} type="text" /></div>
              <img ref="securityCode" src={securityCodeUrl} onClick={this.haneleReloadSecurityCode}/>
              <a href="javascript:void(0)" onClick={this.haneleReloadSecurityCode}>看不清</a>
            </div>
            <a onClick={this.handleSubmit} href="javascript:void(0)">提  交</a>
          </div>
          
    	</div>
    );
  }
}
